<!--获取我的试卷收藏，最新收藏-->
<script setup>

import QuestionApis from '@/apis/question.js'
import useUserStore from '@/stores/user.js'
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";


const userStore = useUserStore()
const router = useRouter()
// const types = ['所有收藏', '最新收藏',
//   '我的收藏']
const types = ['我的收藏']
const noteTypes = [{
  name: '全部',
  value: null
}, {
  name: '章节练习',
  value: 'chapter'
}, {
  name: '试卷',
  value: 'paper'
}, {
  name: '每日一练',
  value: 'everyDayPractice'
}, {
  name: '高频错题',
  value: 'rankError'
}]
const activeIndex = ref(0)
const noteType = ref(null)
const tableDataObj=ref({
  records:[],
  total:0,
  current:1,
  size:10
})


function toggleIndex(index) {
  activeIndex.value = index
  if (types[activeIndex.value] == '最新收藏') {
    QuestionApis.getCategoryNewsCollect({
      params: {
        industryCode: userStore.selectCategory.industryCode,
        examId: userStore.selectCategory.examId,
        categoryId: userStore.selectCategory.categoryId,
        current:1
      }
    }).then(res=>{
      tableDataObj.value=res.data
    })
  }else if(types[activeIndex.value] == '所有收藏'){

  }
}
function getCollection(){
  QuestionApis.getCategoryNewsCollect({
    params: {
      industryCode: userStore.selectCategory.industryCode,
      examId: userStore.selectCategory.examId,
      categoryId: userStore.selectCategory.categoryId,
      current:tableDataObj.value.current,
      size:tableDataObj.value.size
    }
  }).then(res=>{
    tableDataObj.value=res.data
  })
}
function currentChange(){
  getCollection()
}
function sizeChange(val) {
  tableDataObj.value.current=1
  getCollection()
  // getNoteList(types[activeIndex.value],noteType.value,1,val)
}
function noteTypeChange(val) {
  getCollection()
  // getNoteList(types[activeIndex.value],val,noteListData.value.current,noteListData.value.size)

}
function toggleNote(item,index){

  QuestionApis.delCollect({
    industryCode: userStore.selectCategory.industryCode,
    examId:userStore.selectCategory.examId,
    categoryId:userStore.selectCategory.categoryId,
    qid:item.qid
  }).then(res=>{
    ElMessage({
      message: '取消收藏成功',
      type: 'success',
    })
    if(index==0&&tableDataObj.value.current>1){
      tableDataObj.value.current--
    }
    getCollection()
  })
}
function goToDetail(item){
//   前往做题

  router.push({
    path: '/study/question/one',
    query: {
      qId:item.qid,
      chapterId:item.cid,
      recordsType:item.ct,
      // columnId:
    }
  })
}
function init(){
  getCollection()
}
init()
</script>

<template>
  <div class="collection-container">
    <div class="header">
      <div class="header-left">
          <span class="type-text" v-for="(item,index) in types" :key="index" :class="{active:index===activeIndex}"
                @click="toggleIndex(index)">{{ item }}</span>
      </div>
      <div class="header-right">
        <el-select v-model="noteType" @change="noteTypeChange" class="my-select">
          <el-option v-for="(item,index) in noteTypes" :key="index" :value="item.value" :label="item.name">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="content">
      <el-table :data="tableDataObj.records">
        <el-table-column prop="cn" label="名称" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column label="题干" width="360" show-overflow-tooltip>
          <template #default="scope">
            <div v-html="scope.row.st[0].vl"></div>
          </template>
        </el-table-column>
        <el-table-column prop="as" label="答案" width="80" show-overflow-tooltip></el-table-column>
        <el-table-column  label="操作" align="center" width="250">
          <template #default="scope">
            <el-button type="primary" @click="goToDetail(scope.row)">详情</el-button>
            <el-button type="primary" @click="toggleNote(scope.row,scope.$index)">取消收藏</el-button>
          </template>

        </el-table-column>
      </el-table>
    </div>
    <div class="my-pagination">
      <el-pagination
        background
        layout="prev, pager, next,sizes"
        :total="tableDataObj.total"
        v-model:current-page="tableDataObj.current"
        v-model:page-size="tableDataObj.size"
        @current-change="currentChange"
        @size-change="sizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<style scoped>
.collection-container {

}

.collection-container .header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.type-text {
  cursor: pointer;
}

.type-text.active {
  color: #3C6CFF;
}

.my-select {
  width: 200px;
}
.my-pagination{
  margin-top: 32px;
}
</style>